docs(docsite): fix ColorVariants story 'Show code' to follow index re-export pattern#1136
Closed
Hotell wants to merge 1 commit into
Closed
docs(docsite): fix ColorVariants story 'Show code' to follow index re-export pattern#1136Hotell wants to merge 1 commit into
Hotell wants to merge 1 commit into
Conversation
The 'Show code' panel was displaying the entire story module (meta, argTypes and custom docs page) because ColorVariants/index.stories.tsx defined the story inline instead of following the repo's index re-export pattern. Move the ColorIdPrefix story into a dedicated ColorVariants.stories.tsx and re-export it from index.stories.tsx, matching the pattern used by Icons/index.stories.tsx and FileTypeIcons/index.stories.tsx. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
📋 PR Validation SummaryCheck the Build react library job summary for detailed reports:
|
Collaborator
Author
|
replaced by #1138 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The Show code panel on the Icons / Color Variants story was displaying the entire story module — the
defaultmeta,argTypes, and the customdocs.pagerender — instead of just the example component.Root cause
The Fluent
@fluentui/react-storybook-addon-export-to-sandboxaddon shows the whole story module source (so it can be exported to a sandbox). The rest of the docsite avoids this by following an index re-export pattern: each story lives in its own dedicated*.stories.tsxfile containing only that example, whileindex.stories.tsxre-exports the stories and holds the meta/argTypes/page boilerplate.ColorVariants/index.stories.tsxbroke this by defining theColorIdPrefixstory inline alongside all the meta config, so everything leaked into the code display.Fix
ColorVariants/ColorVariants.stories.tsxcontaining only theColorIdPrefixstory (imports, styles, component). This is now the clean source shown in Show code.ColorVariants/index.stories.tsxto re-export the story and hold thedefaultmeta/argTypes/pageconfig, mirroringIcons/index.stories.tsxandFileTypeIcons/index.stories.tsx.The sibling
ColorVariants.stories.tsxis not double-registered because the Storybook glob only matches**/index.stories.@(ts|tsx).Verification
npx nx run docsite:buildcompletes successfully (Storybook + SWC compile all stories with no errors).